<template>
  <div class="app-container">
    <el-form
      label-suffix="："
      label-width="90px"
      :model="ruleForm"
      ref="ruleForm"
      style="width: 95%"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="流程Key" prop="key">
            <el-input v-model="ruleForm.key" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="流程名称" prop="name">
            <el-input v-model="ruleForm.name" @change="updateBaseInfo('name')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属类别" prop="flowSort">
            <select-tree
              class="tree"
              v-model="ruleForm.sortid"
              :data="sortdata"
              placeholder="请选择所属类别"
            ></select-tree>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="标题生成" prop="titleModel">
            <el-input v-model="ruleForm.titleModel"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="theme-main-container">
      <!-- 搜索 -->
      <div class="filter-container">
        <el-tabs v-model="subActiveName" type="card">
          <el-tab-pane label="参数设置" name="1">
            <el-button
              type="success"
              size="mini"
              icon="el-icon-plus"
              @click="addtable"
            >
              添加
            </el-button>
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-share"
              @click="qingchutable"
            >
              清空
            </el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="deltable"
            >
              删除
            </el-button>

            <el-table
              :data="proceParams"
              class="table1"
              @selection-change="handleDetailSelectionChange"
              :row-class-name="rowClassName"
              ref="proceParamsTable"
            >
              <el-table-column
                type="selection"
                width="30"
                align="center"
              />
              <el-table-column
                type="index"
                label="序号"
                width="50"
              > </el-table-column>

              <el-table-column
                label="参数名称"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.paramKey"></el-input>
                </template>
              </el-table-column>

              <el-table-column
                label="参数类型"
              >
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.paramType"
                  >
                    <el-option
                      v-for="item in paramTypes"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column
                label="参数值类型"
              >
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.valueType"
                  >
                    <el-option
                      v-for="item in paramValueTypes"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column
                label="参数值"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.paramValue"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="逾期设置" name="2">
            <el-form
              label-suffix="："
              label-width="120px"
              :model="ruleOverDue"
              ref="ruleOverDue"
              style="width: 95%"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item label="生命周期(D)" prop="actionCycle">
                    <el-input v-model="ruleOverDue.actionCycle"
                              @input.native="formatNumber('actionCycle','ruleOverDue')"
                              @compositionend.native="formatNumber('actionCycle','ruleOverDue')"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="预警时间(H)" prop="beforeTime">
                    <el-input v-model="ruleOverDue.beforeTime"
                              @input.native="formatNumber('beforeTime','ruleOverDue')"
                              @compositionend.native="formatNumber('beforeTime','ruleOverDue')"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="逾期预警" prop="overDueWar">
                    <el-select
                      v-model="ruleOverDue.overDueWar"
                    >
                      <el-option
                        v-for="item in overDueWarnings"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item v-if="ruleOverDue.overDueWar==2" label="预警接口" prop="overDueWarUrl">
                    <el-input v-model="ruleOverDue.overDueWarUrl"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="逾期处理" prop="overDueWay">
                    <el-select
                      v-model="ruleOverDue.overDueWay"
                    >
                      <el-option
                        v-for="item in overDueWays"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item v-if="ruleOverDue.overDueWay==3" label="逾期接口" prop="overDueWayUrl">
                    <el-input v-model="ruleOverDue.overDueWayUrl"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="定时启动" name="3">
            <el-form
              label-suffix="："
              label-width="120px"
              :model="timedStart"
              ref="timedStart"
              style="width: 95%"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item label="启动设置" prop="tstWay">
                    <el-select
                      v-model="timedStart.tstWay"
                    >
                      <el-option
                        v-for="item in timedStartWays"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item v-if="timedStart.tstWay==1" label="参数说明">
                    <span style="color: darkorange">{"TstWay":"MM(每月) or WK(每周) or DD(每天)","Remarks":"每月几号或每周几，每天为0","Timed":[{"hh":"8:30"},{"hh":"10:30"}]}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-if="timedStart.tstWay==1" label="启动参数" prop="tstDoc">
                    <el-input v-model="timedStart.tstDoc"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-if="timedStart.tstWay==1" label="接收人员sql" prop="userSql">
                    <el-input v-model="timedStart.userSql"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-if="timedStart.tstWay==1" label="sql格式" >
                    <el-tag size="success">select username from sys_user</el-tag>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="事件管理" name="4">

            <el-table
              :data="eventClass"
              class="table1"
              ref="eventClassParamsTable"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
              > </el-table-column>

              <el-table-column
                label="事件类型"
              >
                <template slot-scope="scope">
                  <el-select disabled
                             v-model="scope.row.eventType"
                  >
                    <el-option
                      v-for="item in eventTypes"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column
                label="执行方式"
              >
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.eventWay"
                  >
                    <el-option
                      v-for="item in eventWays"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column
                label="执行内容"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.eventDoc"></el-input>
                </template>
              </el-table-column>
            </el-table>
            <el-form
              label-suffix="："
              label-width="120px"
              style="width: 95%"
            >
              <el-row>
                <el-col :span="24">
                  <el-form-item  label="执行说明" prop="overDueWarUrl">
                    <span style="color: darkorange">接口调用方式为POST，参数格式为{"processKey":"流程Key","task_def_key":"节点编号","proce_inst_id":"流程实例ID","businessKey":"业务数据主表id","others":{表单数据JSON}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {flowSortTree} from "@/api/process/flowsort";
import { processProperties,saveProcessProperties } from "@/api/process/flowdesign"
import SelectTree from '@/components/selectTree/index.vue';
import {mapGetters} from "vuex";

export default {
  name: "ProcessProperties",
  components:{
    SelectTree
  },
  props: {
    processId: '',
    deployMName:'',
    bpmElement:Object
  },
  data(){
    return{
      //流程分类
      sortdata: [],
      //tabs标签
      subActiveName:'1',
      //参数集合
      proceParams:[],
      //选中的参数集合
      proceCheckedDetail: [],
      //基本信息
      ruleForm: {
        id: '',
        name: '',
        key:'',
        titleModel:'',
        sortid: '',
        process_key:''
      },
      //逾期信息
      ruleOverDue:{
        actionCycle:'',
        beforeTime:'',
        overDueWar:'0',
        overDueWarUrl:'',
        overDueWay:'0',
        overDueWayUrl:''
      },
      //定时启动
      timedStart:{
        tstWay:'0',
        tstDoc:'',
        userSql:''
      },
      //事件
      eventClass:[]
    }
  },
  watch: {
    businessObject: {
      immediate: false,
      handler: function(val) {
        if (val) {
          this.$nextTick(() => this.resetBaseInfo());
        }
      }
    }
  },
  mounted() {
    this.ruleForm.key=this.processId;
    this.ruleForm.name=this.deployMName;
    this.proInit();
    this.flowSortTree();
  },
  computed:{
    ...mapGetters('store/processparams',[
      'paramTypes',
      'paramValueTypes',
      'overDueWarnings',
      'overDueWays',
      'timedStartWays'
    ]),
    ...mapGetters('store/processevent',[
      'eventTypes',
      'eventWays'
    ]),
  },
  methods:{
    resetBaseInfo() {
      this.bpmElement = window?.bpmnInstances?.bpmElement || {};
    },
    updateBaseInfo(key) {
      let element=window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process");
      const attrObj = Object.create(null);
      attrObj[key] = this.ruleForm.name;
      window.bpmnInstances.modeling.updateProperties(element, attrObj);
    },
    //加载流程属性
    proInit(){
      window.bpmnInstances = {
        modeler: this.bpmElement,
        modeling: this.bpmElement.get("modeling"),
        moddle: this.bpmElement.get("moddle"),
        eventBus: this.bpmElement.get("eventBus"),
        bpmnFactory: this.bpmElement.get("bpmnFactory"),
        elementFactory: this.bpmElement.get("elementFactory"),
        elementRegistry: this.bpmElement.get("elementRegistry"),
        replace: this.bpmElement.get("replace"),
        selection: this.bpmElement.get("selection")
      };
      processProperties({process_key:this.ruleForm.key}).then((res)=>{
        if(res.error=='200'){
          this.ruleForm.sortid=res.result.sortid;
          this.ruleForm.titleModel=res.result.titleModel;
          this.proceParams=res.result.proceParams;
          this.eventClass=res.result.eventClass;
          this.ruleOverDue=res.result.ruleOverDue;
          this.timedStart=res.result.timedStart;
        }
      });
    },
    //获取流程类别
    flowSortTree() {
      flowSortTree().then((res) => {
        if (res.error == '200') {
          this.sortdata = res.result;
        }
      });
    },
    //保存编辑
    saveEdit() {
      let processDefinitionParams= {
        name:this.ruleForm.name,
        key:this.ruleForm.key,
        sortid:this.ruleForm.sortid,
        titleModel:this.ruleForm.titleModel,
        proceParams:this.proceParams,
        ruleOverDue:this.ruleOverDue,
        timedStart:this.timedStart,
        eventClass:this.eventClass
      };
      saveProcessProperties(processDefinitionParams).then((res)=>{
        if (res.error == '200') {
          this.$message.success("保存成功")
        } else {
          this.$message.error('保存失败');
        }
      })
    },
    //添加流程参数行
    addtable() {
      if (this.proceParams == undefined) {
        this.proceParams = new Array();
      }
      let obj = {
        paramKey: '',
        paramType: null,
        paramValue: '',
        valueType:'0'
      };

      this.proceParams.push(obj);
    },
    //清空参数列表
    qingchutable() {
      this.proceParams = [];
    },
    //删除选中的参数
    deltable() {
      if (this.proceCheckedDetail.length == 0) {
        this.$alert("请先选择要删除的数据", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        this.proceParams.splice(this.proceCheckedDetail[0].index - 1, 1);
      }
    },
    //动态生成参数列表的index
    rowClassName({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    //选中参数行
    handleDetailSelectionChange(selection) {
      if (selection.length > 1) {         //删除一行
        this.$refs.proceParamsTable.clearSelection();//清空用户的选择
        this.$refs.proceParamsTable.toggleRowSelection(selection.pop());//切换某一行的选中状态
      } else {
        this.proceCheckedDetail = selection;
      }
    },
    //限制只能输入数字
    formatNumber(field,fieldModel) {
      if(fieldModel=="ruleForm") {
        this.ruleForm[field] = this.ruleForm[field].toString().replace(/[^\d]/g, "");
      }
      if(fieldModel=="ruleOverDue") {
        this.ruleOverDue[field] = this.ruleOverDue[field].toString().replace(/[^\d]/g, "");
      }
    },
  }
}
</script>

<style scoped>

</style>
